<template>
  <div class="list-mian">
    <div class="navbar-div">
      <van-nav-bar   title="类别列表" />
    </div>
    <van-row>
        <van-col span="6">
            <div id="leftNav">
              <ul>
                <li v-for="(item,index) in category" :key="index" @click="clickCategory(index,item.ID,item)" :class="{categoryActive:categoryIndex==index}">
                  {{item.MALL_CATEGORY_NAME}}
                </li>
              </ul>
          </div>
        </van-col>
        <van-col span="18">
          <div class="tabCategorySub">
            <van-tabs v-model="active" @click="onClickCategorySub">
              <van-tab v-for="(item, index) in categorySub" :key="index" :title="item.MALL_SUB_NAME">
              </van-tab>
            </van-tabs>
          </div>
          <div id="list-div">
            <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
              <van-list v-model="loading" :finished="finished" @load="onLoad">
                <div class="list-item" @click="goGoodsInfo(item.ID)" v-for="(item,index) in goodList" :key="index">
                  <div class="list-item-img">
                      <img :src="item.IMAGE1"
                      width="100%"
                      :onerror="errorImg"
                        />
                  </div>
                  <div class="list-item-text">
                    <div>{{item.NAME}}</div>
                    <div>￥{{item.ORI_PRICE | moneyFilter}}</div>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
        </div>
        </van-col>
    </van-row>
  </div>
</template>
<script>
import axios from 'axios'
import Url from 'components/serviceApi/serviceApi'
import { Toast } from 'vant'
import { toMoney } from 'components/filter/filter'
export default {
  data () {
    return {
      category: [],
      categorySub: [],
      categoryIndex: 0,
      active: 0, // 激活标签的值
      categorySubId: '', // 商品小类ID
      goodList: [], // 商品列表
      loading: false, // 加载过度状态
      finished: false, // 上拉加载是否有数据
      page: 1, // 商品分页页码
      isRefresh: false, // 下拉刷新
      errorImg: 'http://images.baixingliangfan.cn/shopGoodsImg/20180408/20180408162848_2190.jpg'
    }
  },
  filters: {
    moneyFilter (money) {
      return toMoney(money)
    }
  },
  created () {
    this.getCategory()
  },
  mounted () {
    let winHeight = document.documentElement.clientHeight
    document.getElementById('leftNav').style.height = winHeight - 46 + 'px'
    document.getElementById('list-div').style.height = winHeight - 90 - 50 + 'px'
  },
  methods: {
    getCategory () {
      axios({
        url: Url.getCategoryList,
        method: 'get'
      }).then(response => {
        console.log(response)
        if (response.data.code === 200 && response.data.message) {
          if (response.data.code === 200 && response.data.message) {
            this.category = response.data.message
            this.getCategorySubByCategoryId(this.category[0].ID)
          } else {
            Toast('服务器错误，数据取得失败')
          }
        } else {
          Toast('服务器错误，数据取得失败')
        }
      }).catch(error => {
        console.log(error)
      })
    },
    clickCategory (index, categoryId, item) {
      this.categoryIndex = index
      this.finished = false
      this.goodList = []
      this.getCategorySubByCategoryId(categoryId)
    },
    getCategorySubByCategoryId (CategoryId) {
      console.log(CategoryId)
      axios({
        url: Url.getCategorySubList,
        method: 'post',
        data: {
          categoryId: CategoryId
        }
      }).then(response => {
        if (response.data.code === 200 && response.data.message) {
          this.categorySub = response.data.message
          this.active = 0
          this.categorySubId = this.categorySub[0].ID
          this.onLoad()
        } else {
          Toast('服务器错误，数据取得失败')
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 点击商品小类
    onClickCategorySub (index, title) {
      this.categorySubId = this.categorySub[index].ID
      this.page = 1
      this.loading = true
      this.goodList = []
      this.onLoad()
    },
    // 上拉加载方法
    onLoad () {
      setTimeout(() => {
        this.categorySubId = this.categorySubId ? this.categorySubId : this.categorySub[0].ID
        console.log(this.categorySubId)
        this.getGoodList()
      }, 1000)
    },
    // 下拉刷新方法
    onRefresh () {
      setTimeout(() => {
        this.isRefresh = false
        this.finished = false
        this.goodList = []
        this.page = 1
        this.onLoad()
      }, 500)
    },
    // 获取商品列表
    getGoodList () {
      axios({
        url: Url.getGoodsListByCategorySubId,
        method: 'post',
        data: {
          categorySubId: this.categorySubId,
          page: this.page
        }
      }).then(response => {
        console.log(response)
        if (response.data.code === 200 && response.data.message.length) {
          this.page++
          this.goodList = this.goodList.concat(response.data.message)
          console.log(this.goodList)
        } else {
          this.finished = true
        }
        this.loading = false
      }).catch(error => {
        console.log(error)
      })
    },
    // 跳转到商品详细页
    goGoodsInfo (id) {
      this.$router.push({name: 'Goods', params: {id: id}})
    }
  }
}
</script>
<style scoped>
.list-mian {
  background-color: #eee;
}
#leftNav ul li {
  line-height: 1rem;
  border-bottom:1px solid #E4E7ED;
  padding:3px;
  font-size:0.8rem;
  text-align: center;
  font-size: .35rem;
}
.categoryActive{
  background-color: #fff;
}
.list-item{
  display: flex;
  flex-direction: row;
  font-size:0.8rem;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  padding:5px;
}
#list-div{
  overflow: scroll;
}
.list-item-img{
  flex:8;
}
.list-item-text{
  flex:16;
  margin-top:10px;
  margin-left:10px;
}
</style>
